<template>
    <div>
      <el-alert v-if="tis" :title="tis" type="success" show-icon :closable="false"/>
      <el-table :data="this.tableData" :row-key="getRowKeys"
      @selection-change="handleSelectionChange" ref="table" stripe>
          <tr v-for="(item, index) in this.tableLabel" :key="index">
            <el-table-column v-if="item.type==='checkbox'" type="selection" width="55" :reserve-selection="true"></el-table-column>
            <el-table-column v-else-if="item.type==='createTime'" :prop="item.prop" :label="item.label" :min-width="item.width" :formatter="formatTime">
            </el-table-column>
            <el-table-column v-else-if="item.type==='updateTime'" :prop="item.prop" :label="item.label" :min-width="item.width" :formatter="formatTime">
            </el-table-column>
            <el-table-column v-else-if="item.type ==='coverImage'" :prop="item.prop" :label="item.label" :width="item.width">
              <template slot-scope="scope">
                  <viewer>
                    <img :src="scope.row.coverImage" style="width:100px;cursor: pointer;">
                  </viewer>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type ==='content'" :prop="item.prop" :label="item.label" :width="item.width">
              <template slot-scope="scope">
                <div>
                  <label class="editor-img" v-html="$options.filters.capitalize(scope.row.content)"></label>
                  <el-button type="text" size="mini" @click="more(scope.row.content)" v-if="scope.row.content.length > 50">更多</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type ==='statusFlag'" :prop="item.prop" :label="item.label">
              <template slot-scope="scope">
                  <el-switch
                  active-color="#13ce66"
                  class="switch"
                  inactive-color="#F04134"
                  active-text="启用"
                  inactive-text="禁用"
                  :value="scope.row.statusFlag === '1' ?true:false"
                  @change="setEnable(scope.row)"/>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='normal'" :prop="item.prop" :label="item.label" :width="item.width"></el-table-column>
          </tr>
          <el-table-column label="操作" :width="this.models.width">
              <template slot-scope="scope">
                  <el-button type="danger" v-if="scope.row.del" size="mini" @click="del(scope.row)">删除</el-button>
                  <el-button type="primary" v-if="scope.row.edit" size="mini" @click="edit(scope.row)">修改</el-button>
              </template>
          </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
          class="page-footer"
          background
          layout="total,prev,pager,next,sizes,jumper"
          :total="this.models.total"
          :page-sizes="[10,20,30,40,50]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </el-row>

      <el-dialog title="查看更多" :visible.sync="dialogVisible" width="60%">
        <div class="other-img" v-html="contents"></div>
      </el-dialog>

    </div>
  </template>
  
  <script>
    import moment from 'moment'
  export default {
      props: {
          tableData: {
            type: Array,
            default: () => {
                return [];
            }
          },
          tableLabel:{
            type: Array,
            default: () => {
                return [];
            }
          },
          models: {
            type: Object,
            default: () => {
                return null;
            }
          },
      },
      data() {
          return {
            tis:"",
            ids:[],
            params: {
                type:"page",
                pageNum: 1,
                pageSize: 10
            },
            dialogVisible:false,
            contents:''
          };
      },
      filters: {
        capitalize: function (value) {
            const nums = '50';
            if (!value) return '';
            value = value.replace(/<[^>]+>/g, '');
            if (value.length > nums) {
                return value.slice(0, nums) + '...';
            }
            return value;
        }
      },
      mounted(){
        if(this.models.hackReset){
          this.$refs.table.clearSelection();
          this.ids = [];
          this.tis = "";
        }
      },
      methods: {
        formatDate(row, column) {
            const date = row[column.property]
            if (date == undefined) {
            return ''
            }
            return moment(date).format("YYYY-MM-DD")
        },
        formatTime(row, column) {
            const date = row[column.property]
            if (date == undefined) {
            return ''
            }
            return moment(date).format("YYYY-MM-DD HH:mm:ss")
        },
        getRowKeys(row) {
            return row.id
        },
        handleSelectionChange(val) {
          let ids = [];
          val.forEach(item =>{ 
              ids.push(item)
          });
          this.ids = ids;
          this.tis="已选择 "+val.length+" 项";
          if(val.length==0){
            this.tis="";
            this.ids = [];
          }
          this.$emit("on-selection-click", this.ids);
        },
        more(content){
          this.contents = content;
          this.dialogVisible = true;
        },
        del(row){
          this.$emit("on-del-click", row);
        },
        edit(row){
          this.$emit("on-edit-click", row);
        },
        setEnable(row){
            this.$emit("on-enable-click",row);
        },
        handlePageChange(page) {
            this.params.pageNum = page;
            this.loadList();
        },
        handleSizeChange(page) {
            this.params.pageSize = page;
            this.loadList();
        },
        loadList() {
            this.$emit("on-search-click", this.params);
        }
      }
  };
  </script>
  
  <style>
    .other-img img{
      width: 100% !important;
    }
  </style>